<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #optionsDiv {
            position: absolute;
            bottom: 17px;
            width: 100%;
            padding: 20px 0;
            z-index: 1;
            text-align: center;
        }

        button {
            background: white;
            padding: 7px;
            border: 1px solid #005e95;
            font-size: 0.9em;
            margin: 5px;
            color: #005e95;
        }

        button:hover {
            background: #005e95;
            color: white;
            cursor: pointer;
        }
    </style>
    <link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
        //默认航班 线性慢速飞行 直线快速飞行 成倍增加的速度飞行 10秒飞行 飞往柏林
        require(["esri/Map", "esri/views/SceneView"], function (Map, SceneView) {
            var map = new Map({
                basemap: "dark-gray-vector"
            });

            var view = new SceneView({
                container: "viewDiv",
                map: map,
                zoom: 4,
                environment: {
                    atmosphere: null,
                    starsEnabled: true
                }
            });

            function shiftCamera(deg) {
                let camera = view.camera.clone();//克隆当前相机
                camera.position.longitude += deg;//相机位置的经度+60
                return camera;//返回当前相机对象
            }

            //默认航班
            document.getElementById("default")
                .addEventListener("click", () => {
                    view.goTo(shiftCamera(60));
                });

            //线程慢速飞行
            document.getElementById("linearSlow")
                .addEventListener("click", () => {
                    view.goTo(shiftCamera(60), {
                        speedFactor: 0.1,//飞行速度
                        easing: "linear",//线性飞过
                    });
                });

            //直线快速飞行
            document.getElementById("linearFast")
                .addEventListener("click", () => {
                    view.goTo(shiftCamera(60), {
                        speedFactor: 10,//飞行速度
                        easing: "linear",//线性飞过
                    });
                });

            //成倍增加的速度飞行
            document.getElementById("expoIncrease")
                .addEventListener("click", () => {
                    view.goTo(shiftCamera(30), {
                        duration: 4000,
                        easing: "in-expo"//成倍增加转速
                    });
                });

            //10秒飞行
            document.getElementById("fixedDuration")
                .addEventListener("click", () => {
                    view.goTo(shiftCamera(30), {
                        duration: 4000,
                        maxDuration: 10000,//动画的最大允许持续时间
                    });
                });

            //飞往柏林
            document.getElementById("bounceBerlin")
                .addEventListener("click", () => {
                    view.goTo({
                        position:[116.39, 39.90, 3300]
                    }, {
                        speedFactor:0.3,
                        easing:customEasing,
                        duration: 4000,
                        maxDuration: 10000,//动画的最大允许持续时间
                    });
                });

            //缓动函数
            function customEasing(t){
                return (
                    1 -
                    Math.abs(Math.sin(-1.7 + t * 4.5 * Math.PI)) * Math.pow(0.5, t * 10)
                );
            }
        });
    </script>
</head>
<body>
<!--默认航班 线性慢速飞行 直线快速飞行 成倍增加的速度飞行 10秒飞行 飞往柏林-->
<div id="optionsDiv">
    <button id="default">默认航班</button>
    <button id="linearSlow">线性慢速飞行</button>
    <button id="linearFast">直线快速飞行</button>
    <button id="expoIncrease">成倍增加的速度飞行</button>
    <button id="fixedDuration">10秒飞行</button>
    <button id="bounceBerlin">飞往北京</button>
</div>
<div id="viewDiv"></div>
</body>
</html>
